<template>
  <div class="content">
    <div class="w">
      <back-btn />
      <div class="info-item space-between">
        <div class="label-name">团队名称</div>
        <div class="flex">{{ teamInfo?.teamName }}<i @click="openEditName"></i></div>
      </div>
      <div class="info-item space-between">
        <div class="label-name">人数上限</div>
        <div>{{ teamInfo?.peopleLimit }}</div>
      </div>
      <div class="info-item space-between">
        <div class="label-name">失效时间</div>
        <div>{{ teamInfo?.expiredTime }}</div>
      </div>
      <div class="flex-center">
        <a-button @click="determineCanBeTransfer">
          <template #icon>
            <i class="transfer-icon"></i>
          </template>
          移交团队
        </a-button>
      </div>
    </div>
    <a-modal
      :visible="visible"
      title="编辑团队名称"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="mb8">新名称</div>
      <a-input
        v-model:value="editNewName"
        placeholder="请输入"
        class="formWidth"
        allowClear
        :maxlength="15"
        onkeyup="value=value.replace(/[, ]/g,'')"
        @input="getNumber"
      />
    </a-modal>

    <a-modal
      :visible="transferVisible"
      title="移交团队"
      :confirm-loading="transferLoading"
      @ok="openConfirmDialog"
      @cancel="cancelTransfer"
    >
      <a-radio-group v-model:value="transferUserId">
        <a-radio v-for="item in tableDataExceptOwner" :key="item.id" :value="item.id">{{
          item.customerName
        }}</a-radio>
      </a-radio-group>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { message as msgHelper, Modal } from 'ant-design-vue'
import { computed, onMounted, ref } from 'vue'
import { useTable } from '@/hook/useTable'
import { apiTeamMemberList, apiTeamInfo, type TeamInfo, apiUpdateTeamName, apiTransferTeam } from '@/api/manage'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { ROLE_TYPE } from '@/const'
import { useRouter } from 'vue-router'
import { useChatBus } from '@/hook/useChatBus'

const getNumber = (obj: any) => {
  obj.target.value = obj.target.value.replace(/[^\u4e00-\u9fa5A-Za-z0-9_]/g, '')
  editNewName.value = obj.target.value
}

const teamInfo = ref<TeamInfo>()
const getTeamInfo = async () => {
  const {
    data: { entity }
  } = await apiTeamInfo({ teamId: userStore.userInfo.currentTeamId })
  console.warn(entity, 'data')
  teamInfo.value = entity
}
onMounted(() => {
  getTeamInfo()
})

const visible = ref(false)
const confirmLoading = ref(false)
const editNewName = ref('')
const handleOk = async () => {
  if (!editNewName.value) return
  const { data } = await apiUpdateTeamName({
    teamId: userStore.userInfo.currentTeamId,
    teamName: editNewName.value
  })
  msgHelper.info(data.message)
  userStore.setUserInfo()
  handleCancel()
  getTeamInfo()
}
const handleCancel = () => {
  editNewName.value = ''
  visible.value = false
}

const openEditName = () => {
  visible.value = true
}

const userStore = useUserInfoStore()
// 解构出列表数据和loading
const { tableData, loading, pageObj, handlePageChange, getList, updatedParams } = useTable({
  apiFn: apiTeamMemberList,
  isPageable: true,
  params: { teamId: userStore.userInfo.currentTeamId },
  immediate: true
})

const tableDataExceptOwner = computed(() => {
  return tableData.value.filter(c => c.roleType !== ROLE_TYPE.所有者)
})

const determineCanBeTransfer = () => {
  if (tableData.value.length <= 1) {
    Modal.confirm({
      title: '提醒',
      cancelText: ' ',
      content: `您当前团队的人数不足，暂无法移交团队。`,
      closable: true,
      class: 'info-modal'
    })
    return
  }
  transferVisible.value = true
}

const transferVisible = ref(false)
const transferLoading = ref(false)
const transferUserId = ref('')
const transferUserName = computed(() => {
  const userItem = tableData.value.find((c) => c.id === transferUserId.value)
  return userItem?.customerName || ''
})
const openConfirmDialog = () => {
  if(!transferUserId.value) return
  Modal.confirm({
    title: '提醒',
    content: `您确定将团队移交给成员：${transferUserName.value} 吗`,
    onOk: confirmTransfer,
    onCancel: cancelTransfer,
    closable: true,
    class: 'info-modal'
  })
}

const router = useRouter()
const bus = useChatBus(() => {})
const confirmTransfer = async () => {
  const { data } = await apiTransferTeam({
    teamCustomerId: transferUserId.value
  })
  msgHelper.info(data.message)
  cancelTransfer()
  userStore.setUserRoleType(ROLE_TYPE.成员)
  bus.emit('setMenuList')
  router.replace({name: 'PersonalCenter'})
  // getTeamInfo()
}
const cancelTransfer = () => {
  transferUserId.value = ''
  transferVisible.value = false
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  min-height: 100vh;
  .w {
    position: relative;
    width: 800px;
    margin: 0 auto;
    padding-top: 140px;
    .back {
      position: absolute;
      right: 0;
      top: 24px;
    }
    .avatar {
      font-size: 18px;
      color: #3d3d3d;
      img {
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 0px 5px 13px 0px rgba(234, 238, 241, 0.4);
      }
    }
    .info-item {
      width: 100%;
      background-color: #f8fafc;
      padding: 20px 24px;
      margin-bottom: 12px;
      color: #0d1c2e;
      font-size: 14px;
      &:nth-last-child(2) {
        margin-bottom: 50px;
      }
      .label-name {
        font-weight: bold;
        color: #0d1c2e;
      }
      i {
        display: inline-block;
        cursor: pointer;
        width: 18px;
        height: 18px;
        margin-left: 6px;
        background: url('@/static/image/icon_edit.png') no-repeat;
        background-size: 100% 100%;
        &:hover {
          background-image: url('@/static/image/icon_edit_ac.png');
        }
      }
    }
    .ant-btn {
      display: flex;
      align-items: center;
      padding: 8px 29px;
      font-size: 14px;
      color: #0d1c2e;
      height: unset;
      border: 1px solid rgba(112, 124, 151, 0.25);
      border-radius: 4px;
      &:hover {
        background-color: #f5f6f8;
      }
      .transfer-icon {
        cursor: pointer;
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 6px;
        background: url('@/static/image/icon_remove.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
<style lang="scss">
.info-modal {
  .ant-modal-body {
    padding: 20px 32px 24px;
    color: #0D1C2E;
    .ant-modal-confirm-title {
      font-weight: bold;
      margin-bottom: 24px;
    }
  }
  .anticon-exclamation-circle {
    display: none;
  }
  .ant-modal-confirm-content.ant-modal-confirm-content.ant-modal-confirm-content {
    margin-left: unset;
  }
}
</style>
